<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: red;
            /*
             outline 用来设置元素的轮廓线，用法和border一模一样
             轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
             box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
            */
            box-shadow:10px 10px 50px rgba(0,0,0,0.3);
            /*左侧偏移值，上方偏移值，阴影的模糊半径，颜色*/
            border-radius: 50%;
         }
    </style>
</head>
<body>
     <div class="box1"></div>
</body>
</html>